<template>
<ul-scrollbar
    tag="div"
    wrap-class="list-wrapper"
    ref="scrollbar"
    class="scrollbar-wrapper"
    wrapStyle="height:100%;overflow-x:auto;"
    >
    
  <div class="demo" v-infinite-scroll="load" infinite-scroll-distance="20"  infinite-scroll-delay="200">
    
    <div class="area area-input">
      <ul-input type="text" v-model="input1" clearable></ul-input>
      <ul-input type="text" v-model="input1" disabled></ul-input>
      <ul-input type="textarea" v-model="input1"></ul-input>
      <ul-input type="textarea" v-model="input1" disabled></ul-input>
      <ul-input placeholder="请输入密码" v-model="input1" show-password></ul-input>
    </div>
    <ul-breadcrumb separator="/">
      <ul-breadcrumb-item :to="{ path: '/' }">首页</ul-breadcrumb-item>
      <ul-breadcrumb-item><a href="/">活动管理</a></ul-breadcrumb-item>
      <ul-breadcrumb-item>活动列表</ul-breadcrumb-item>
      <ul-breadcrumb-item>活动详情</ul-breadcrumb-item>
    </ul-breadcrumb>
    <ul-tree :data="treeData" show-checkbox :props="defaultProps" :allowDrop="allowDrop" :allowDrag="allowDrag"></ul-tree>
    <ul-cascader :options="cascaderOptions" :props="cascaderProps" filterable :show-all-levels="false"></ul-cascader>
    <ul-cascader :options="cascaderOptions" filterable :props="{ checkStrictly: true }" :show-all-levels="false"></ul-cascader>
    <ul-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
      <ul-button>上边</ul-button>
    </ul-tooltip>
    <ul-tooltip class="item" effect="light" content="Top Center 提示文字" placement="top">
      <ul-button>上边 light</ul-button>
    </ul-tooltip>
    <ul-card>
      <ul-image 
        style="width: 100px; height: 100px"
        src="https://leicloud.ulearning.cn/resources/972721/201811141823364022" 
        :preview-src-list="imgList"
        @on-download="onDownload"
        >
      </ul-image>
    </ul-card>
     <ul-autocomplete
      class="search-group"
      search
      clearable
      suffix-icon="icon-quanshipei-sousuo"
      v-model="formData.textarea"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @select="handleSelect"
      @search="handleSearch"
      @keydown.native.enter="handleSearch"
      :popper-append-to-body="false"
    ></ul-autocomplete>
     
    <ul-button type="primary" @click="viewImage">imageView</ul-button>
    <div class="area">
      <ul-tag
        v-for="item in items"
        :key="item.label"
        :type="item.type"
        >
        {{ item.label }}
      </ul-tag>
    </div>
    <div class="area">
      <ul-editor 
        :height="400" 
        v-model="input1" 
        toolbarOptions="fontselect | fontsizeselect | bold italic underline forecolor | numlist bullist alignleft aligncenter alignright alignjustify | subscript superscript table imageupload formula link unlink" 
        :options="{height: 300}" 
        :uploaderConfig=editorObsConfig></ul-editor>
    </div>
    <div class="area">
      <ul-dropdown trigger="click">
      <!-- <span class="ul-dropdown-link">
        下拉菜单<i class="ul-icon-arrow-down ul-icon--right"></i>
      </span> -->
      <ul-button type="primary" size="large">
        <div class="ul-dropdown__trigger">
          <span>更多菜单</span>
          <i class="iconfont icon-xialacaozuo"></i>
        </div>
      </ul-button>
      <ul-dropdown-menu slot="dropdown">
        <ul-dropdown-item>黄金糕</ul-dropdown-item>
        <ul-dropdown-item>狮子头</ul-dropdown-item>
        <ul-dropdown-item>螺蛳粉</ul-dropdown-item>
        <ul-dropdown-item>双皮奶</ul-dropdown-item>
        <ul-dropdown-item disabled>蚵仔煎</ul-dropdown-item>
      </ul-dropdown-menu>
    </ul-dropdown>
    <ul-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </ul-date-picker>
    <ul-date-picker
      v-model="value2"
      type="datetime"
      placeholder="选择日期时间">
    </ul-date-picker>
    </div>
    <div class="area area-button">
      <div class="primary">
        <ul-button type="primary" @click="clickHandler">alert</ul-button>
        <ul-button type="primary" size="small" @click="showConfirm">confirm</ul-button>
        <ul-button type="primary" size="mini" @click="showDialog">dialog</ul-button>
        <ul-button type="primary" disabled>disabled</ul-button>
        <ul-button type="primary" round @click="showToast">round toast</ul-button>
        <ul-button type="primary" icon="icon-fujianleixingtupian">带图标</ul-button>
      </div>
      <div class="hollow">
        <ul-button hollow @click="message">default(message)</ul-button>
        <ul-button hollow size="small" @click="drawer = true">drawer</ul-button>
        <ul-button hollow size="mini">mini</ul-button>
        <ul-button hollow disabled>disabled</ul-button>
        <ul-button hollow round>round</ul-button>
        <ul-button hollow icon="icon-fujianleixingtupian">带图标</ul-button>
      </div>
      <div class="plain">
        <ul-button plain>default</ul-button>
        <ul-button plain size="small">small</ul-button>
        <ul-button plain size="mini">mini</ul-button>
        <ul-button plain disabled>disabled</ul-button>
        <ul-button plain round>round</ul-button>
        <ul-button plain icon="icon-fujianleixingtupian">带图标</ul-button>
      </div>
    </div>
    
    <div class="area">
      <ul-radio v-model="radio1" label="1">选项一</ul-radio>
      <ul-radio v-model="radio1" label="2">选项二</ul-radio>
      <ul-radio v-model="radio2" disabled label="1">选项一</ul-radio>
      <ul-radio v-model="radio2" disabled label="2">选项二</ul-radio>
      <ul-radio-group v-model="radio3">
        <ul-radio :label="1">选项一</ul-radio>
        <ul-radio :label="2">选项二</ul-radio>
      </ul-radio-group>
    </div>

    <div class="area">
      <ul-checkbox v-model="checked1" :indeterminate="true">选项1</ul-checkbox>
      <ul-checkbox v-model="checked2">选项2</ul-checkbox>
      <div class="checkbox">
        <ul-checkbox-group v-model="checkList">
          <ul-checkbox :label="1">选项1</ul-checkbox>
          <ul-checkbox :label="2">选项2</ul-checkbox>
          <ul-checkbox :label="3">选项3</ul-checkbox>
          <ul-checkbox :label="4" disabled>未选中禁用</ul-checkbox>
          <ul-checkbox :label="5" disabled>选中禁用</ul-checkbox>
        </ul-checkbox-group>
      </div>
      <div class="checkbox">
        <ul-checkbox-group v-model="checkList2" :min="1" :max="3">
          <ul-checkbox :label="1">选项1</ul-checkbox>
          <ul-checkbox :label="2">选项2</ul-checkbox>
          <ul-checkbox :label="3">选项3</ul-checkbox>
          <ul-checkbox :label="4">选项4</ul-checkbox>
          <ul-checkbox :label="5">选项5</ul-checkbox>
        </ul-checkbox-group>
      </div>
      <div class="checkbox">
         <ul-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</ul-checkbox>
        <div style="margin: 15px 0;"></div>
        <ul-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <ul-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</ul-checkbox>
        </ul-checkbox-group>
      </div>
    </div>
    <div class="area">
      <ul-switch v-model="checked1"></ul-switch>
      <ul-switch v-model="checked1" disabled></ul-switch>
    </div>
     <ul-form ref="ruleForm" :model="formData" :rules="rules" label-width="100px">
        <ul-form-item label="输入框" prop="input">
          <ul-input type="text" v-model="formData.input" clearable></ul-input>
        </ul-form-item>
        <ul-form-item label="选择器" prop="select">
          <ul-select v-model="formData.select" placeholder="请选择">
            <ul-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.value == '选项5'"
              >
            </ul-option>
          </ul-select>
          <ul-select v-model="formData.select" disabled placeholder="请选择">
            <ul-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.value == '选项5'"
              >
            </ul-option>
          </ul-select>
        </ul-form-item>
        <ul-form-item label="开关" prop="switch">
          <ul-switch v-model="formData.switch"></ul-switch>
        </ul-form-item>
        <ul-form-item label="单选框" prop="radio">
          <ul-radio-group v-model="formData.radio">
            <ul-radio :label="1">选项一</ul-radio>
            <ul-radio :label="2">选项二</ul-radio>
          </ul-radio-group>
        </ul-form-item>
        <ul-form-item label="复选框" prop="checkbox">
          <ul-checkbox-group v-model="formData.checkbox">
            <ul-checkbox :label="1">选项1</ul-checkbox>
            <ul-checkbox :label="2">选项2</ul-checkbox>
            <ul-checkbox :label="3">选项3</ul-checkbox>
          </ul-checkbox-group>
        </ul-form-item>
        <ul-form-item label="多行输入" prop="textarea">
          <ul-input type="textarea" v-model="formData.textarea"></ul-input>
        </ul-form-item>
        <ul-form-item>
          <ul-button type="primary" @click="submitForm('ruleForm')">提交</ul-button>
        </ul-form-item>
      </ul-form>
     <div class="area">
      <ul-table
      :data="tableData"
      border
       v-loading="loading"
      style="width: 100%">
      <ul-table-column
        prop="date"
        label="日期"
        width="180">
      </ul-table-column>
      <ul-table-column
        prop="name"
        label="姓名"
        width="180">
      </ul-table-column>
      <ul-table-column
        prop="address"
        label="地址">
      </ul-table-column>
    </ul-table>
    </div>
    <div class="area">
      <ul-pagination
        layout="prev, pager, next, jumper"
        prevText="上一页"
        nextText="下一页"
        :total="1000">
      </ul-pagination>
    </div>
    <div class="area">
      <ul-popover
        placement="bottom"
        title="标题"
        width="200"
        trigger="click"
        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
        <span slot="reference">click 激活</span>
      </ul-popover>
      <ul-input
        class="search-group"
        placeholder="请输入内容"
        clearable
        suffix-icon="icon-quanshipei-sousuo"
        search
        @search="handleSearch"
        @keydown.native.enter="handleSearch"
        v-model="formData.textarea">
      </ul-input>
    </div>
    
    
    <ul-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <ul-select v-model="value"
       :popper-append-to-body="true"
       placeholder="请选择">
        <ul-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.value == '选项5'"
          >
        </ul-option>
      </ul-select>
      <!-- <span slot="footer" class="dialog-footer">
        <ul-button type="primary" @click="dialogVisible = false">确 定</ul-button>
        <ul-button plain @click="dialogVisible = false">取 消</ul-button>
      </span> -->
    </ul-dialog>
    <ul-drawer
      title="我是标题"
      :visible.sync="drawer"
      direction="btt"
      :before-close="handleClose">
      <span>我来啦!</span>
      
    </ul-drawer>
    
  </div>
   <ul-backtop target=".scrollbar-wrapper .ul-scrollbar__wrap"></ul-backtop>
</ul-scrollbar>
</template>

<script>
// import ULButton from 'packages/button'
// import obs from './main.js'
// import {Loading} from 'packages'
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  name:'demo',
  data () {
    return {
      radio1: 1,
      radio2: 1,
      radio3: 1,
      checked1:true,
      checked2:false,
      checkList: [1,5],
      checkList2: [1,4],
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      input1: 'add',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      formData: {
        input: '',
        select: '',
        switch: false,
        radio: '',
        checkbox: [],
        textarea: ''
      },
      rules: {
        input: [
          { required:true, message: '请输入标题', trigger:"blur" }
        ],
        select: [
          { required:true, message: '请选择一个选项', trigger:"change" }
        ],
        radio: [
          { required:true, message: '请选择一个选项', trigger:"change" }
        ],
        checkbox: [
          { required:true, message: '请选择一个选项', trigger:"change" }
        ],
        textarea: [
          { required:true, message: '请选择文本', trigger:"blur" }
        ]
      },
      dialogVisible:false,
      value1: '',
      value2: '',
      items: [
          { type: '', label: '标签一' },
          { type: 'success', label: '标签二' },
          { type: 'info', label: '标签三' },
          { type: 'danger', label: '标签四' },
          { type: 'warning', label: '标签五' }
        ],
      editorObsConfig: {
        authorization: '30E749800215BE3EFFE2D7901C417FC2',  // tongshike
        uptokenHost: 'https://courseapi.tongshike.cn',
        obsHost: 'https://leicloud.ulearning.cn'
      },
      // editorObsConfig: {
      //   mode: 'qiniu',
      //   authorization: 'EEAB5A4ACAA71D90B46C687AE8573A55',  // 树人
      //   uptokenHost: 'https://ulearning.zjsru.edu.cn/api',
      //   obsHost: 'https://uobs1.zjsru.edu.cn/view',
      //   config: {
      //     uphost: 'uobs1.zjsru.edu.cn',
      //     upprotocol: 'https'
      //   }
      // },
      scrollList: [1,2,3,4,5,6,7,8,9,10],
      drawer: false,
      loading: true,
      imgList: [{
          // url: 'https://leicloud.ulearning.cn//tongsk/contentmanage/85bcde8d-b5ba-4e72-9db3-b18d9924af4d.JPG',
          url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          name: '第一张图.png'
        },{
          // url: 'https://leicloud.ulearning.cn/resources/972721/201811141823364022',
          url: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
          name: '第二张图.jpg'
        }],
      editorOptions: {
        height: 300
      },
       treeData: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        cascaderOptions: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }],
        cascaderProps: { multiple: true }
    }
  },
  created () {
    window.test = this
  },
  mounted () {
    // setTimeout(() => {
    //   this.scrollList = [1,2,3,4,5,6,7,8,9,10]
    //   this.$nextTick(()=>{
    //     // this.$refs.scrollbar.update()
    //   })
    // }, 3000);
    setTimeout(()=> {
      this.loading = false
    },10000)
  },
  methods: {
    viewImage () {
      this.$viewImage({
        // initialIndex: 1,
        imgList : this.imgList,
        onDownload: this.onDownload
      })
    },
    onDownload (item) {
      console.log(item)
    },
    message () {
      var types = ['info','warning','success','error']
      this.$message({message:'哈哈哈哈哈的',
        duration: 300000000,
        showClose: Math.round(Math.random() * 3)%2 == 1,
        type: types[Math.round(Math.random() * 3)]
      })
    },
    handleSearch () {
      console.log(this.formData.textarea)
      this.scrollList.push(this.scrollList.length + 1)
      this.$loading({ fullscreen: true,background:'#fff' })
    },
    clickHandler () {
      console.log('button')
      this.$alert('内容内容内容内容内容内容内容内容内容内容内容内容内容', '标题', {type: 'warning', subMessage: '大大发大大发'})
        .catch(()=>{})
    },
    showToast () {
      let toast = this.$toast('阿斯顿发斯蒂芬', {type: 'success',duration:2000, subMessage: '啊的沙发上地方接口阿杀得快放假阿士大夫看就'})
      console.log(toast)
    },
    showConfirm () {
      console.log('button')
      this.$confirm('确定删除吗', '标题',{type: 'warning'})
        .then(()=>{})
        .catch(()=>{})
    },
    showDialog () {
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？','提示')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    load () {
      console.log(123)
    },
    allowDrop () {
      return true
    },
    allowDrag () {
      return true
    },
    querySearch(queryString, cb) {
      var results = [{
        value: 'asdf'
      }]
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    handleSelect(item) {
      console.log(item)
    },
    handleSearch (e) {
      console.log(e)
    }
  }
}
</script>

<style lang="scss" scoped>
html,body{
  height: 100%;
  overflow: hidden;
  margin: 0;
}
#app{
  height: 100%;
}
.ul-scrollbar{
  height: 100%;
}
.demo{
  height: 100%;
  padding: 20px;

  .ul-form{
  }
  .area-button{
    button{
      margin-bottom: 10px;
    }
  }
  .search-group{
    margin-left: 20px;
    width: 240px;
  }
  .area{
    padding:  10px 0;
  }
  .area-input{
    .ul-input,.ul-textarea{
      margin-bottom: 10px;
    }
  }
  .block{
    div{
      line-height: 50px;
      text-align: center;
    }
  }
  .list-wrapper{
    overflow: auto;
  }
  .ul-tag,.ul-dropdown,.ul-date-editor{
    margin-right: 10px;
  }
  .loading-wrapper{
    width: 500px;
    height: 300px;
  }
  .ul-cascader{
    width: 400px;
    margin-right: 10px;
  }
}
</style>